import React, { useState } from 'react';
import { DatePicker, Button } from 'antd';
import AuthorizedButton from '@/components/AuthorizedButton';
import moment from 'moment';

const ExtraComponent = props => {
  const [loading, setLoading] = useState(false);
  // this is click export button
  const clickHandlerExport = () => {
    setLoading(true);
    props.clickHandlerExport(() => setLoading(false));
  };
  const { yearMonth } = props?.params;
  return (
    <>
      截止年月：
      <DatePicker.MonthPicker
        allowClear={false}
        onChange={(momentDate, formatDate) => props.onChangeParams('yearMonth', formatDate)}
        value={isNaN(yearMonth) && !isNaN(Date.parse(yearMonth)) ? moment(yearMonth) : moment()}
        format="YYYY-MM"
        disabledDate={current => current && current > moment().endOf('day')}
      />
      &nbsp;&nbsp;
      <AuthorizedButton authority={props.exportBtnAuthorized}>
        <Button className="yellow-button" loading={loading} onClick={clickHandlerExport}>
          导出报表
        </Button>
      </AuthorizedButton>
    </>
  );
};

export default ExtraComponent;
